import { useRequest } from 'ahooks';
import { Tabs } from 'antd';
import { observer } from 'mobx-react-lite';

import { useStore } from '@/store';

import { sysWebSystemConfigGroupVoList } from '@/services/base/jichumokuaixitongpeizhifenzujiekou';

import Panel from './panel';

const Page: React.FC = () => {
  const store = useStore();
  const group = useRequest(async () => {
    const res = await sysWebSystemConfigGroupVoList(
      {} as ArgumentsType<typeof sysWebSystemConfigGroupVoList>[0]
    );

    return res.data;
  });

  return (
    <>
      <Tabs
        style={{
          height: '100%'
        }}
        tabPosition="left"
        items={group.data?.map((item) => {
          return {
            label: item.groupName,
            key: item.id as unknown as string,
            children: <Panel key={item.id} group={item} />
          };
        })}
      />
    </>
  );
};

export default observer(Page);
